import { getDataStat } from "@/services/home";
import { Button, Card, DatePicker, Divider, Icon, Tooltip } from "antd";
import moment from "moment";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import styles from "./Home.less";
import user from "../../assets/homeImgV2/user.png";
import askNum from "../../assets/homeImgV2/askNum.png";
import callback from "../../assets/homeImgV2/callback.png";
import solveRatio from "../../assets/homeImgV2/solveRatio.png";
import human from "../../assets/homeImgV2/human.png";

class DataStatic extends React.Component{
  
  quickDate = (amount,unit) => {
    const fromDate = moment().subtract(amount,unit)
    const toDate = moment()
    this.props.changeDate([fromDate,toDate])
  }

  render(){
    const { loading ,fromDate,toDate,dataInfo} = this.props;
    return(
      <div>
        <Divider style={{margin:'16px 0 24px 0'}} />
        <div className={styles.lineBox}>
            <div className={styles.dataBox}>
              <img src={user} className={styles.dataImg} />
              <div>
                <div className={styles.dataTitle}>{formatMessage({ id: 'userDataStatic.uniqueUsers' })}</div>
                <div className={styles.dataNum}>{dataInfo.visitNum}</div>
              </div>
            </div>

            <div className={styles.dataBox}>
              <img src={askNum} className={styles.dataImg} />
              <div>
                <div className={styles.dataTitle}>{formatMessage({ id: 'userDataStatic.questionCount' })}</div>
                <div className={styles.dataNum}>{dataInfo.questionNum}</div>
              </div>
            </div>

            <div className={styles.dataBox}>
              <img src={callback} className={styles.dataImg} />
              <div>
                <div className={styles.dataTitle}>{formatMessage({ id: 'userDataStatic.recallRate' })}</div>
                <div className={styles.dataNum}>{dataInfo.answerRatio+'%'}</div>
              </div>
            </div>

            <div className={styles.dataBox}>
              <img src={solveRatio} className={styles.dataImg} />
              <div>
                <div className={styles.dataTitle}>{formatMessage({ id: 'userDataStatic.resolutionRate' })}</div>
                <div className={styles.dataNum}>{dataInfo.solveRatio+'%'}</div>
              </div>
            </div>
          </div>
      </div>
    )
  }
}

export default DataStatic